<template>
  <div class="bookshelf">
    <header>
      <div class="header">
        <span class="back" @click="$router.back(-1)">
          <svg-icon icon-class="back"></svg-icon>
        </span>
        <h1>BookSelf</h1>
        <span></span>
      </div>
    </header>
    <div class="list">
      <dl
        @click="toReader('reader', item)"
        v-for="item of list"
        :key="item.bookId"
      >
        <dt class="cover">
          <img
            class="coverImg"
            :src="item.coverUrl"
            v-default-img="defaultImg"
          />
          <svg-icon
            v-show="item.isUpdate"
            class="update-icon"
            icon-class="update-icon"
          ></svg-icon>
        </dt>
        <dd class="desc">
          <h4 class="bookName ellipsis-two" v-text="item.bookTitle"></h4>
          <p
            class="reading-history"
            :class="{ showReadChapter: item.isRead }"
            :readChapter-content="item.readChapter"
            v-text="item.isRead ? 'Read' : 'Unread'"
          ></p>
        </dd>
      </dl>
      <dl @click="toReader('home')" class="add-books-box">
        <dt class="cover">
          <svg-icon class="coverImg" icon-class="add-books"></svg-icon>
        </dt>
        <dd></dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultImg: require("@/assets/images/default-cover.png"),
      list: [], //书架列表
    };
  },
  components: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.myBookshelf();
  },
  methods: {
    // 获取我的书架
    async myBookshelf() {
      let res = await this.$api.reader.myBookshelf({});
      if (res.code === 1) {
        this.list = res.source;
      }
    },
    // 跳转阅读器
    toReader(name, item) {
      if (name === "reader") {
        this.$router.push({
          name: "reader",
          params: { id: item.bookId }, //书籍id
        });
      } else if (name === "home") {
        this.$router.push({ name: "home" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bookshelf {
  > header {
    width: 100%;
    height: 100px;
    margin-bottom: 64px;
    .header {
      width: 100%;
      height: 100px;
      background: #fff;
      box-sizing: border-box;
      padding: 23px 15px 0 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: fixed;
      .back {
        .svg-icon {
          width: 56px;
          height: 56px;
        }
      }
      > h1 {
        font-size: 34px;
        color: #333333;
      }
    }
  }
  > .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 32px;
    > dl {
      width: 208px;
      margin-bottom: 32px;
      > dt.cover {
        position: relative;
        .coverImg {
          width: 100%;
          height: 278px;
          border-radius: 16px;
        }
        .update-icon {
          width: 95px;
          height: 56px;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
      > dd.desc {
        > .bookName {
          height: 72px;
          margin-top: 16px;
          font-size: 28px;
          font-weight: 500;
          color: #333333;
          line-height: 36px;
        }
        > .reading-history {
          margin-top: 8px;
          font-size: 24px;
          color: #999999;
          line-height: 40px;
          &.showReadChapter::after {
            content: attr(readChapter-content);
            color: #e86472;
            margin-left: 8px;
          }
        }
      }
      &.add-books-box {
        margin-bottom: 100px;
      }
    }
    &::after {
      content: "";
      width: 208px;
      display: block;
    }
  }
}
</style>
